<html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应急物资管理系统-管理版</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3797ad',
                        secondary: '#4a80ff',
                        neutral: {
                            100: '#f4f4f4',
                            200: '#e4e4e4',
                            700: '#444647',
                            900: '#333333'
                        }
                    },
                    fontFamily: {
                        sans: ['Arial', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 text-neutral-700 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }
            .btn-secondary {
                @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
            }
            .submenu {
                @apply ml-4 mt-1 space-y-1 overflow-hidden transition-all duration-300 max-h-0 opacity-0;
            }
            .submenu.open {
                @apply max-h-96 opacity-100;
            }
            .submenu-item {
                @apply flex items-center gap-3 px-4 py-2 text-neutral-700 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200 text-sm;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen flex flex-col">
<!-- 顶部导航条 -->
<header class="bg-white shadow-sm">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <h1 class="text-2xl font-bold text-primary hidden md:block">洪水管理系统-管理版</h1>

        <!-- 移动端菜单按钮 -->
        <button id="mobile-menu-button" class="md:hidden text-neutral-700">
            <i class="fa fa-bars text-xl"></i>
        </button>

        <!-- 登录信息 -->
        <div class="flex items-center gap-3">
            <div class="hidden md:block">
                <span class="text-neutral-700">管理员</span>
            </div>
            <button onclick="window.location.href='select.html'" class="btn-primary flex items-center gap-2">
                <i class="fa fa-sign-out"></i>
                <span class="hidden sm:inline">登出</span>
            </button>
        </div>
    </div>
</header>

<div class="flex flex-1 overflow-hidden">
    <!-- 侧边栏导航 -->
    <aside id="sidebar" class="w-64 bg-white shadow-md transform -translate-x-full md:translate-x-0 fixed md:sticky top-0 bottom-0 z-20 transition-transform duration-300">
        <div class="p-4 h-full flex flex-col">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-primary flex items-center gap-2">
                    <i class="fa fa-tachometer"></i>
                    <span>导航</span>
                </h2>
            </div>

            <nav class="flex-1 overflow-y-auto">
                <ul class="space-y-1">
                    <li>
                        <a href="#" class="sidebar-item active">
                            <i class="fa fa-home"></i>
                            <span>首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="userList.jsp" class="sidebar-item">
                            <i class="fa fa-search"></i>
                            <span>查看用户信息</span>
                        </a>
                    </li>
                    <li class="relative">
                        <button id="resource-menu-button" class="sidebar-item w-full justify-between group">
                            <div class="flex items-center gap-3">
                                <i class="fa fa-bell"></i>
                                <span>应急资源管理</span>
                            </div>
                            <i class="fa fa-chevron-down text-xs transition-transform duration-200 group-hover:rotate-180"></i>
                        </button>
                        <div id="resource-submenu" class="submenu">
                            <a href="WarehouseManagement.html" class="submenu-item">
                                <i class="fa fa-building-o"></i>
                                <span>应急仓库管理</span>
                            </a>
                            <a href="SuppliesManagementServlet" class="submenu-item">
                                <i class="fa fa-cubes"></i>
                                <span>应急物资管理</span>
                            </a>
                            <a href="TeamManagementServlet" class="submenu-item">
                                <i class="fa fa-users"></i>
                                <span>应急队伍管理</span>
                            </a>
                            <a href="EquipmentManagementServlet" class="submenu-item">
                                <i class="fa fa-truck"></i>
                                <span>应急装备管理</span>
                            </a>
                        </div>
                    </li>
                    <li>
                        <a href="ViewReportsServlet" class="sidebar-item">
                            <i class="fa fa-map-marker"></i>
                            <span>查看资源请求</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <!-- 侧边栏底部 -->
            <div class="pt-4 border-t border-neutral-200">
                <div class="flex items-center gap-3 text-sm text-neutral-700">
                    <i class="fa fa-info-circle"></i>
                    <span>系统版本 v1.0.0</span>
                </div>
            </div>
        </div>
    </aside>

    <!-- 遮罩层 -->
    <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-10 hidden md:hidden" onclick="toggleSidebar()"></div>

    <!-- 主内容区 -->
    <main class="flex-1 p-4 md:p-6 overflow-y-auto">
        <div class="max-w-7xl mx-auto">
            <!-- 欢迎信息 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-900">欢迎回来，管理员</h2>
                <p class="text-neutral-700">今天是 <span id="current-date"></span></p>
            </div>

            <!-- 数据卡片 -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-primary">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-neutral-700">当前资源请求</p>
                            <h3 class="text-3xl font-bold text-neutral-900">3</h3>
                        </div>
                        <div class="bg-primary/10 p-3 rounded-lg">
                            <i class="fa fa-bell text-primary text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-yellow-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-neutral-700">正在运输中资源</p>
                            <h3 class="text-3xl font-bold text-neutral-900">12</h3>
                        </div>
                        <div class="bg-yellow-500/10 p-3 rounded-lg">
                            <i class="fa fa-map-marker text-yellow-500 text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-green-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-neutral-700">应急救援行动</p>
                            <h3 class="text-3xl font-bold text-neutral-900">8</h3>
                        </div>
                        <div class="bg-green-500/10 p-3 rounded-lg">
                            <i class="fa fa-ambulance text-green-500 text-xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-5 border-l-4 border-purple-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-neutral-700">在线人员</p>
                            <h3 class="text-3xl font-bold text-neutral-900">24</h3>
                        </div>
                        <div class="bg-purple-500/10 p-3 rounded-lg">
                            <i class="fa fa-users text-purple-500 text-xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图片轮播 -->
            <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
                <h3 class="text-xl font-bold text-neutral-900 mb-4">实时监控</h3>
                <div class="relative overflow-hidden rounded-lg">
                    <div id="image-carousel" class="flex transition-transform duration-500 ease-in-out">
                        <img src="https://picsum.photos/id/1029/1200/400" alt="洪水监控图1" class="min-w-full h-64 md:h-80 object-cover">
                        <img src="https://picsum.photos/id/1015/1200/400" alt="洪水监控图2" class="min-w-full h-64 md:h-80 object-cover">
                        <img src="https://picsum.photos/id/1018/1200/400" alt="洪水监控图3" class="min-w-full h-64 md:h-80 object-cover">
                    </div>
                    <div class="absolute bottom-4 left-0 right-0 flex justify-center gap-2">
                        <button class="w-3 h-3 rounded-full bg-white opacity-50 carousel-dot active" data-index="0"></button>
                        <button class="w-3 h-3 rounded-full bg-white opacity-50 carousel-dot" data-index="1"></button>
                        <button class="w-3 h-3 rounded-full bg-white opacity-50 carousel-dot" data-index="2"></button>
                    </div>
                </div>
            </div>

<!--            &lt;!&ndash; 紧急情况 &ndash;&gt;-->
<!--            <div class="bg-white rounded-xl shadow-sm p-4 mb-6">-->
<!--                <div class="flex justify-between items-center mb-4">-->
<!--                    <h3 class="text-xl font-bold text-neutral-900">资源请求情况</h3>-->
<!--                    <a href="ViewReportsServlet" class="text-primary hover:text-primary/80 font-medium flex items-center gap-1">-->
<!--                        <span>查看全部</span>-->
<!--                        <i class="fa fa-arrow-right"></i>-->
<!--                    </a>-->
<!--                </div>-->

<!--                <div class="space-y-3">-->
<!--                    <div class="bg-red-50 border border-red-200 rounded-lg p-4 flex items-start gap-3">-->
<!--                        <div class="bg-red-100 p-2 rounded-full">-->
<!--                            <i class="fa fa-exclamation-triangle text-red-500"></i>-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <h4 class="font-medium text-red-800">A地区水位超过警戒线，需要救援队伍</h4>-->
<!--                            <p class="text-sm text-red-700">发布时间：2025-07-04 08:30</p>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex items-start gap-3">-->
<!--                        <div class="bg-yellow-100 p-2 rounded-full">-->
<!--                            <i class="fa fa-exclamation-circle text-yellow-500"></i>-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <h4 class="font-medium text-yellow-800">B地区可能发生山体滑坡，需要应急食物和水</h4>-->
<!--                            <p class="text-sm text-yellow-700">发布时间：2025-07-04 10:15</p>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">-->
<!--                        <div class="bg-blue-100 p-2 rounded-full">-->
<!--                            <i class="fa fa-info-circle text-blue-500"></i>-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <h4 class="font-medium text-blue-800">C地区降雨量过大</h4>-->
<!--                            <p class="text-sm text-blue-700">发布时间：2025-07-04 12:45</p>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
        </div>
    </main>
</div>

<script>
    // 移动端侧边栏切换
    function toggleSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebar-overlay');

        sidebar.classList.toggle('-translate-x-full');
        overlay.classList.toggle('hidden');
    }

    document.getElementById('mobile-menu-button').addEventListener('click', toggleSidebar);

    // 设置当前日期
    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
    document.getElementById('current-date').textContent = new Date().toLocaleDateString('zh-CN', dateOptions);

    // 图片轮播
    let currentSlide = 0;
    const slides = document.getElementById('image-carousel');
    const dots = document.querySelectorAll('.carousel-dot');
    const slideCount = dots.length;

    function showSlide(index) {
        if (index < 0) index = slideCount - 1;
        if (index >= slideCount) index = 0;

        currentSlide = index;
        slides.style.transform = `translateX(-${currentSlide * 100}%)`;

        dots.forEach((dot, i) => {
            if (i === currentSlide) {
                dot.classList.add('opacity-100');
                dot.classList.remove('opacity-50');
            } else {
                dot.classList.remove('opacity-100');
                dot.classList.add('opacity-50');
            }
        });
    }

    // 点击指示点切换图片
    dots.forEach(dot => {
        dot.addEventListener('click', () => {
            const index = parseInt(dot.dataset.index);
            showSlide(index);
        });
    });

    // 自动轮播
    setInterval(() => {
        showSlide(currentSlide + 1);
    }, 5000);

    // 应急资源管理子菜单切换
    const resourceMenuButton = document.getElementById('resource-menu-button');
    const resourceSubmenu = document.getElementById('resource-submenu');

    resourceMenuButton.addEventListener('click', () => {
        resourceSubmenu.classList.toggle('open');
        // 切换箭头方向
        const arrowIcon = resourceMenuButton.querySelector('.fa-chevron-down');
        arrowIcon.classList.toggle('rotate-180');
    });
</script>

</body></html>